<template>
  <div class="message-container">
    <ts-header title="消息" back></ts-header>
    <flex-view>
      <div class="message-list">

        <pull-to :topLoadMethod="refresh"
                 @top-state-change="stateChange"
                 :top-config="topConfig"
                 @infinite-scroll="loadMore"
                 :distance-index="3">

          <template slot="top-block" scope="props">
            <div class="top-load-wrapper">
              <svg class="icon"
                   :class="{
                   'icon-arrow': props.state === 'trigger',
                   'icon-loading': props.state === 'loading'}"
                   aria-hidden="true">
                <use :xlink:href="iconLink"></use>
              </svg>
              {{ props.stateText }}
            </div>
          </template>

          <!-- 参考 vux
            @on-open="handleEvents('on-open')"  @on-close="handleEvents('on-close')"
            -->
          <swipeout>
            <transition-group name="card-left">
              <swipeout-item v-for="(msg,index) in messageList" class="card-animate"
                             transition-mode="follow" :key="msg.detail_id">
                <div slot="right-menu">
                  <swipeout-button @click.native="deleteItem('delete',index,msg.detail_id)" type="warn">删除
                  </swipeout-button>
                </div>
                <div slot="content">
                  <div class="message-item" @click="goMsgDetail(msg.id,index)">
                    <div class="item-left" :class="{'new':!msg.status}">
                      <img class="item-img" :src="msg.image"/>
                    </div>
                    <div class="item-middle">
                      <div class="right-top">
                        <span class="title">{{msg.title}}~</span>
                        <span class="date-time">{{ msg.create_time | fmtCommonDate('hh:mm') }}</span>
                      </div>
                      <div class="right-bot">
                        {{msg.message}}
                      </div>
                    </div>
                  </div>
                </div>
              </swipeout-item>
            </transition-group>
          </swipeout>

          <div class="loading-bar">
              <span v-if="!allLoaded">
               <svg class="icon icon-loading" aria-hidden="true"><use xlink:href="#icon-loading"></use></svg>
               加载中...</span>
            <span class="no-more" v-else>暂无更多数据</span>
          </div>

        </pull-to>


      </div>
    </flex-view>
  </div>
</template>

<script>
  import {Swipeout, SwipeoutItem, SwipeoutButton} from '../../components/tsui/swipeout'
  import {GET_MESSAGE_LIST, DEL_MESSAGE,GET_MESSAGE_DETAIL} from '../../assets/js/api'

  export default {
    name: 'message',
    components: {
      Swipeout,
      SwipeoutItem,
      SwipeoutButton,
    },
    data() {
      return {
        //上下拉
        allLoaded: false,
        currentPage: 1,
        messageList: [],
        topConfig: {
          // 下拉刷新触发的距离
          triggerDistance: 50
        },
        iconLink: '',
        url: ''
      }
    },
    async created() {
      this.messageList = await this.getMessageList();
      if (this.messageList < 10) {
        this.allLoaded = true;
      }
      this.allLoaded = this.messageList.length < 10;
    },
    methods: {
      async deleteItem(type, index, detail_id) {
        if (type === 'delete') {
          let json = await this.$http.post(DEL_MESSAGE, {detail_id}, {show: true});
          if (json.result === 1) {
            this.$toast('删除成功');
            this.messageList.splice(index, 1);
          }
        }
      },
      async getMessageList() {
        let json = await this.$http.post(GET_MESSAGE_LIST, {page: this.currentPage});
        if (json.result === 1) {
          return json.data;
        }
        return [];
      },
      async refresh(loaded) {
        this.currentPage = 1;
        this.messageList = await this.getMessageList();
        if (this.messageList.length < 10) {
          this.allLoaded = true;
        }
        loaded('done');
      },
      async loadMore() {
        if (!this.allLoaded) {
          this.currentPage++;
          let jsonData = await this.getMessageList();
          this.messageList = this.messageList.concat(jsonData);
          if (jsonData.length === 0) this.allLoaded = true;
        }
      },
      async goMsgDetail(message_id,index) {
        const json = await this.$http.post(GET_MESSAGE_DETAIL, {message_id});
        this.$router.push({path: '/message/msgDetail', query: {url: this.messageList[index].url}});
      },
      //下拉状态改变
      stateChange(state) {
        if (state === 'pull' || state === 'trigger') {
          this.iconLink = '#icon-arrow-bottom';
        } else if (state === 'loading') {
          this.iconLink = '#icon-loading';
        } else if (state === 'loaded-done') {
          this.iconLink = '#icon-finish';
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  @import "../../assets/css/pull-to";

  .message-item {
    background-color: #FFFFFF;
    padding: .20rem .22rem;
    display: flex;
    align-items: center;
    position: relative;
    transition: all .2s;
    @include borderScale('bottom');
    &:active {
      background-color: #DDDDDD;
    }
    .item-left {
      height: 45px;
      width: 45px;
      .item-img {
        width: 45px;
      }
      &.new {
        position: relative;
        &:before {
          content: '';
          position: absolute;
          display: block;
          border-radius: 100%;
          right: 0;
          @include wh(10px, 10px);
          background-color: #E33C32;
        }
      }
    }
    .item-middle {
      min-width: 0;
      flex: 1;
      line-height: 1.4;
      margin-left: .24rem;
      .right-top {
        display: flex;
        .title {
          flex: 1;
          font-weight: bold;
          font-size: .2615rem;
        }
        .date-time {
          @include sc(.26rem, #909090);
        }
      }
      .right-bot {
        @include wot();
        @include sc(.24rem, #909090);
        width: 4.36rem;
      }
    }
  }

  .card-animate {
    transition: .8s all ease;
  }

  .card-left-enter, .card-left-leave-active {
    opacity: 0;
  }
</style>
